<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:background-image="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登陆代码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script type="text/html" src="../static/jquery.min.js"></script>
    <script type="text/javascript"></script>
    <script type="text/javascript" src="webjars/jquery/1.12.4/jquery.js"></script>
     
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <style>
          /*a标签去下划线和点击不变色，div内容居中*/
         a {
             text-decoration: none;
             color: #333333  
        }

         #idiv {
            text-align: center;
            border-radius: 20px;
             width: 300px;
             height: 350px;
             margin: auto;
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
        }

        body {
            background-image: url("image/bgimage.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;

        }

        #pop {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

         </style>

</head>
<body>
<div id="idiv">

    <form th:action="@{/loginaction}" method="post" id="pop">
        <div><label> User Name : <input type="text" name="username" id="username"/> </label></div>
        <div><label> Password : <input type="password" name="usertel" id="usertel"/> </label></div>

        <div class="form-group">
            <div class="col-sm-8">
                <button type="button" onclick="suaction()" name="submit" class="btn btn-default">登录</button>
            </div>
        </div>
        <div class="panel-footer text-right">
            <span class="panel-title">大侠工作室@2108</span>
        </div>
    </form>
</div>

<script>
    function suaction() {
        console.log("username" + document.getElementById("username").value);
        console.log("usertel" + document.getElementById("usertel").value);

        $.ajax({
            url: "/loginaction",
            type: "POST",
            dataType: "json",
            data: {
                "username": document.getElementById("username").value,
                "usertel": document.getElementById("usertel").value
            },
            dataType: "json",
            success: function (res) {
                console.info("提交后结果！！！" + res.toString());
                if (res) {//根据返回值进行跳转
                    window.location.href = '../templates/index.html';
                }
            }
        }).done().fail(function () {
            alert('网络不行，请求错误')
        });
    }


</script>
</body>

</html>

<!--<script th:inline="javascript">-->
<!--function bu() {-->
<!--document.getElementById("h1").innerHTML="js替换结束";-->
<!--console.log([[${title}]]);-->
<!--}-->
<!--</script>-->